CSS های بدون استفاده چه معایبی برای سایت به همراه خواهند داشت؟ آیا امکان حذف این کدها وجود دارد؟ آیا تا به حال به این فکر کرده اید که CSS بدون استفاده را در وردپرس حذف کنید تا سایت شما سریعتر بارگیری شود؟ چطور باید این کار را انجام داد؟
CSS بدون استفاده در وردپرس چیست؟
CSS بدون استفاده, کدهای CSS است که توسط قالب و افزونه های وردپرس اضافه شده است و شما به آن احتیاج ندارید. حذف این کدها عملکرد وردپرس و تجربه کاربر را بهبود می بخشد.
در این مقاله، ما به شما نشان می دهیم که چگونه CSS استفاده نشده را بدون هیچ مشکلی در وب سایت وردپرسی خود حذف کنید.
وجود این کدهای اضافی می تواند باعث شود تا صفحه بازدید کنندگان در مرورگر دیرتر لود شود که قطعا باعث تجربه بد کاربران خواهد شد. در واقع زمان بارگذاری کندتر می تواند بر رتبه بندی جستجوی سایت نیز تأثیر بگذارد و در نتیجه ترافیک کمتری به سایت شما وارد شود.
با استفاده از Google Pagespeed Insights می توانید ببینید که چگونه کد CSS بدون استفاده روی وب سایت شما تأثیر می گذارد. در این سایت بخشی را با عنوان “حذف CSS بدون استفاده ” به همراه جزئیات فایل های CSS و تاثیر آن ها بر زمان بارگذاری مشاهده خواهید کرد.
اگر به برخی از کدهای CSS نیازی نیست, چرا در وردپرس اضافه می شوند؟
کدهای CSS برای ایجاد ظاهر وب سایت وردپرسی استفاده می شوند. یعنی قالب وردپرس شما شامل CSS است که بیشتر آن در فایل style.css گنجانده شده است.
علاوه بر CSS قالب، افزونه های وردپرسی نیز CSS خود را بارگذاری می کنند. به عنوان مثال؛
- ووکامرس CSS را برای نمایش محصولات بارگذاری می کند.
- یک افزونه صفحه ساز، CSS مخصوص خود را برای نمایش صفحات سفارشی شما اضافه می کند.
- و یک افزونه فرم ساز شامل CSS هایی است که فرم های شما را نمایش میدهد.
- همچنین فونت های وب، فونت های آیکون و سایر عناصری که از آنها در قالب خود استفاده کرده اید دارای فایل های CSS است که باید به قالب اضافه کنید.
چگونه CSS بدون استفاده را در وردپرس حذف کنیم؟
برای حذف CSSهای بدون استفاده در وب سایت وردپرسی چند روش مختلف وجود دارد.
اما باید این نکته را بدانید که حذف تمام CSS های بدون استفاده در وردپرس کار بسیار دشواری است. به دلیل نحوه عملکرد وردپرس, پیدا کردن و حذف برخی از CSS های استفاده نشده کار سختی است.
با این وجود، ما در ادامه دو روش برای حذف CSS استفاده نشده را به شما نشان می دهیم که می توانید یکی از این روش ها را انتخاب و از آن استفاده کنید.
روش 1. با استفاده از WP Rocket , CSSهای بدون استفاده را از وردپرس حذف کنید.
این روش ساده ترین راه برای افراد تازه کار محسوب می شود و باعث بهبود فایل های CSS در وب سایت وردپرسی شما، از جمله حذف اکثر CSS استفاده نشده می شود.
استفاده از این افزونه کار را ساده کرده و به هدف اصلی که رابط کاربری بهتر است می رسد. این یعنی وب سایت شما سریع روی ابزارهای تست سرعت بارگیری می شود و سریع تر به کاربران نمایش داده خواهد شد.
برای شروع ابتدا باید افزونه WP Rocket را نصب و فعال کنید. پس از فعال سازی، باید به بخش تنظیمات » WP Rocket بروید و تب ” File Optimization” را انتخاب کنید.
در مرحله بعد به قسمت فایل های CSS بروید. از اینجا باید گزینه “Optimize CSS delivery” را علامت بزنید.
این گزینه یک فایل CSS ایجاد می کند که فقط شامل کد CSS مورد نیاز برای نمایش قسمت های قابل مشاهده وب سایت شما است. ابتدا این فایل را بارگذاری می کند، صفحه را به بازدیدکنندگان نشان می دهد و سپس سایر فایل های CSS را با استفاده از فناوری به نام (بارگیری به تعویق افتاده) لود می کند.
با حذف CSS بدون استفاده، وب سایت شما برای کاربران بسیار سریعتر از قبل لود و نمایش داده می شود.
در پایان پس از انجام تغییرات, روی دکمه “ذخیره تغییرات” کلیک کنید و منتظر بمانید تا WP Rocket فایل CSS لازم را برای همه پست ها و صفحات شما ایجاد کند. این افزونه به طور خودکار حافظه پنهان وب سایت شما را نیز پاک می کند.
پس از اتمام کار، می توانید با استفاده از Google Pagespeed Insights دوباره عملکرد وب سایت خود را آزمایش کنید.
ترفندهای تحویل فایل اضافی برای افزایش عملکرد
WP Rocket به شما این امکان را نیز می دهد که کوئری را از فایل های استاتیک حذف کنید. فایل های Google Fonts را ترکیب کرده و HTML را فشرده کنید. همه این ترفندها و پیشرفت های کوچک, سرعت کلی سایت شما را افزایش می دهد و سرعت لود بالا را برای بازدیدکنندگان شما ایجاد می کند.
در این افزونه گزینه هایی نیز برای فشرده سازی و ترکیب فایل های CSS مشاهده خواهید کرد. این گزینه ها درخواست های HTTP را کاهش داده و سرعت بیشتری را به همراه دارد.
با این حال، شما باید وب سایت خود را به دقت بررسی کنید تا مطمئن شوید که پس از فعال کردن این تنظیمات، سایت دچار مشکل نشده باشد.
مانند تنظیمات بخش CSS می توانید همان بهینه سازی را برای فایل های جاوا اسکریپت در وب سایت خود اعمال کنید. می توانید آنها را فشرده و ترکیب کنید تا به عنوان یک فایل واحد عمل کرده و بارگذاری فایل های جاوا اسکریپت را برای بهبود عملکرد به تعویق بیندازید.
روش 2. با استفاده از Asset CleanUp , CSS بدون استفاده را در وردپرس حذف کنید
این روش کمی پیشرفته اما فوق العاده قدرتمند است و به شما کمک می کند CSS های بدون استفاده را به راحتی از هر صفحه وب سایت وردپرس خود حذف کنید.
این روش کمی پیچیده است و شما باید عملکرد و ظاهر وب سایت خود را کاملاً آزمایش کنید تا مطمئن شوید هیچ چیز خراب نشده باشد.
برای شروع کار ابتدا باید افزونه Asset Cleanup را نصب و فعال کنید و پس از فعال سازی، از صفحه Asset CleanUp گزینهی Settings را کلیک کنید و به تب Test Mode بروید. از اینجا ، باید گزینه “Enable Test Mode” را فعال کنید.
این به شما امکان می دهد تنظیمات مختلف را امتحان کنید و آنها را به عنوان مدیر, بدون تأثیر بر بازدیدکنندگان وب سایت آزمایش کنید.
پس از آن، باید به بخش Asset CleanUp » CSS/JS Manager بروید. دراینجا می توانید صفحه به صفحه فایل های CSS و JavaScript را که نمیخواهید غیر فعال یا حذف کنید.
با انجام این کار ابتدا صفحه اصلی شما بررسی می شود و سپس فایل های CSS و JavaScript بارگذاری شده در آن صفحه به شما نشان داده می شود.
شما باید اسکرول کنید و فایل های بارگذاری شده را بررسی کنید. اگر فایلی را مشاهده کردید که به آن احتیاج ندارید، می توانید آن را برای آن صفحه خاص، نوع پست یا لینک SiteWide حذف کنید.
این افزونه به شما این امکان را نیز می دهد پست ها یا صفحات خاصی را از همین جا انتخاب کنید یا می توانید در قسمت ویرایش پست یا برگه به این گزینه ها دسترسی پیدا کنید.
در صفحه ویرایش پست، کادر Asset CleanUp را درست در زیر ویرایشگر پست مشاهده خواهید کرد.
زمانی که بازدیدکننده این صفحه را در وب سایت شما مشاهده می کند، این افزونه به طور خودکار تمام فایل های بارگذاری شده را بررسی و لیست می کند. سپس می توانید با استفاده از این اطلاعات فایل های CSS یا جاوا اسکریپت استفاده نشده را که در آن صفحه نیاز ندارید, به راحتی حذف کنید.
مهم: فراموش نکنید که وب سایت خود را پس از حذف CSS یا JavaScript های بدون استفاده آزمایش کنید تا مطمئن شوید که همه چیز خوب کار می کند.
پس از اتمام حذف فایل های استفاده نشده CSS و JavaScript، می توانید به بخش تنظیمات افزونه برگردید و ” Test Mode” را خاموش کنید.
فراموش نکنید که برای ذخیره تغییرات خود روی دکمه Update All Settings کلیک کنید.
اکنون می توانید وب سایت خود را با استفاده از Google Pagespeed Insights آزمایش کنید تا تغییرات ایجاد شده در CSS بدون استفاده را مشاهده کنید.
امیدواریم این مقاله به شما کمک کرده باشد تا CSS های بدون استفاده را به راحتی در وردپرس حذف کنید.
